<template>
  <view class="course-page home-wrap" :style="{ 'background':'#F5F4F9 url('+HTTP_IMG_URL()+'j/top_bg.png) no-repeat','background-size': '100%'}">
	<shopro-navbar :isBack="false" :background="{'background':'url('+HTTP_IMG_URL()+'j/top_bg.png) no-repeat','background-size': '100% 100%'}">
		<text slot="content" class="u-flex u-flex-center u-flex-items-center" style="color: #000; width: 85%; text-align: center;padding-left: 20rpx;height: 100%;">课程</text>
	</shopro-navbar>
    <!-- 倒计时和CAAC选择 -->
	<CountdownCard :configInfo="configInfo" :examType="examType" />
    <!-- 课程列表 -->
    <view class="course-list">
      <CourseCard
        v-for="(course, idx) in courseList"
        :key="idx"
        :courseId="course.id"
        :img="course.image || placeholderImg"
        :title="course.name"
        :series="course.teacher"
        :price="course.price"
        :status="course.status"
        :avatar="course.avatar || defaultAvatar"
        @buy="buyCourse(course)"
        @study="startStudy(course)"
        @imgClick="goCourseDetail(course)"
      />
    </view>
  </view>
</template>

<script>
import recordApi from '@/api/record.js'
import CourseCard from '@/components/CourseCard.vue'
import { HTTP_IMG_URL } from "@/config/app";
import CountdownCard from "@/components/CountdownCard.vue";
export default {
	components: {
		CountdownCard,
		CourseCard
	},
	data() {
		return {
			examType: 'CAAC',
			courseList: [],
			configInfo: {},
			defaultAvatar: this.$imgUrl+'/static/images/avatar.png', // 头像占位
			placeholderImg: this.$imgUrl+'/static/images/video.png' // 课程图片占位
		}
	},
	onLoad() {
		this.getSystemConfig();
		this.getCourseList();
	},
	onShow() {
		const examType = wx.getStorageSync('examType');
		console.log(examType, 'uni.getStorageInfoSync');
		if(examType){
			this.examType = examType;
		}
		this.getCourseList();
	},
	methods: {
		HTTP_IMG_URL() {
			return this.$imgUrl;
		},
		getSystemConfig () {
			recordApi.getSystemConfig().then((res) => {
				if (res.response.data.code == 1) {
					this.configInfo = res.response.data.data;
					console.log(res.response.data.data, 'getSystemConfig');
				}
			})
		},
		getCourseList () {
			let type = '';
			if(this.examType === 'CAAC') {
				type = '1';
			} else if(this.examType == 'AOPA'){
				type = '2';
			} else {
				type = '3';
			}
			recordApi.getInfoList({
				type: type
			}).then(res => {
				if (res.response.data.code == 1) {
					console.log(res.response.data, 'res.response.data');
					this.courseList = res.response.data.data.data;
				}
			})
		},
		onBack() {
			uni.navigateBack();
		},
		goCourseDetail(course) {
			// 跳转到课程详情页，传递课程id
			uni.navigateTo({
				url: `/pages/course/detail?courseId=${course.id || ''}`
			});
		},
		buyCourse(course) {
			// 购买逻辑，后续可对接支付
			uni.navigateTo({
				url:'/pages/pay/pay?courseId=' + course.id
			})
		},
		startStudy(course) {
			// 跳转到学习页面或播放课程
			uni.navigateTo({
				url:'/pages/course/studyCourse?courseId=' + course.id
			})
		}
	}
}
</script>

<style scoped>
.course-page {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 20rpx;
}
.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 24rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
}
.countdown-bar {
  background: #eaf1ff;
  margin: 24rpx 0 0 0;
  padding: 24rpx 24rpx 16rpx 24rpx;
  display: flex;
  align-items: center;
  position: relative;
}
.countdown-info {
  display: flex;
  align-items: baseline;
}
.countdown-days {
  color: #2d5aff;
  font-size: 48rpx;
  font-weight: bold;
}
.countdown-unit {
  color: #2d5aff;
  font-size: 28rpx;
  margin-left: 4rpx;
}
.countdown-desc {
  color: #8a8a8a;
  font-size: 24rpx;
  margin-left: 16rpx;
  flex: 1;
}
.caac-btn {
  background: #2d5aff;
  color: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  padding: 8rpx 32rpx;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
}
.course-list {
  margin-top: 24rpx;
  padding: 0 24rpx;
}
.course-card {
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  margin-bottom: 32rpx;
  padding: 24rpx;
}
.course-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}
.avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 12rpx;
  background: #eee;
}
.series-title {
  font-size: 28rpx;
  color: #333;
}
.course-img-box {
  position: relative;
  width: 100%;
  height: 180rpx;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  padding: 12rpx;
}
.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.course-title {
  font-size: 28rpx;
  color: #333;
}
.course-price {
  font-size: 28rpx;
  color: #ff3b30;
  margin-left: 16rpx;
}
.buy-btn {
  background: #2d5aff;
  color: #fff;
  border-radius: 24rpx;
  font-size: 28rpx;
  padding: 8rpx 32rpx;
  margin-left: 16rpx;
}
</style>
